<template>
	<div class="cash cash_t_common cash_t_brief">
		<div class="tips tips-border">
			<div class="tips_tit pb">操作提示</div>
			<div class="tips_txt">订单总金额 = 订单支付总金额 + 商户优惠券抵扣金额 + 平台优惠券抵扣金额 + 订单积分抵扣金额 + 运费金额</div>
			<div class="tips_txt">商户结算金额 = 订单总金额 - 平台抽成金额 - 分销佣金 - 商户优惠券抵扣金额</div>
			<div class="tips_txt">商户实际结算金额 = 商户结算金额 - 商户退款金额</div>
			<div class="tips_txt">平台抽成金额 = （订单总金额 - 运费金额 - 平台优惠券抵扣金额 - 订单积分抵扣金额） * 平台抽成百分比</div>
			<div class="tips_txt">平台实际抽成金额 = 平台抽成金额 - 平台退款金额</div>
			<div class="tips_txt">分销佣金 = （订单支付总金额） * 佣金百分比</div>
			<div class="tips_txt">分销实际佣金 = （订单支付总金额 - 商户退款金额） * 佣金百分比</div>
		</div>
		<div class="cash-header">
			<div>
				<span class="cash_t_title1">商户名称 :{{dataModel.name}}</span>
			</div>
		</div>
		<div class="cash-header">
			<div>
				<span class="cash_t_title">商户结算</span>
				<span> 账期时间: {{searchForm.createTime[0]}} 至 {{searchForm.createTime[1]}}</span>
			</div>
		</div>
		<div class="cash-body">
			<div class="content">
				<p class="title">订单总金额(不含优惠折扣)(元)</p>
				<p class="money">{{dataModel.order_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">运费金额(元)</p>
				<p class="money">{{dataModel.express_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">订单支付总金额(元)</p>
				<p class="money">{{dataModel.pay_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">商户结算金额(元)</p>
				<p class="money">{{dataModel.supplier_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">商户退款金额(元)</p>
				<p class="money">{{dataModel.refund_supplier_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">商户实际结算金额(元)</p>
				<p class="money">{{dataModel.real_supplier_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">平台抽成金额(元)</p>
				<p class="money">{{dataModel.sys_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">平台退款金额(元)</p>
				<p class="money">{{dataModel.refund_sys_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">平台实际抽成金额(元)</p>
				<p class="money">{{dataModel.real_sys_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">分销佣金(元)</p>
				<p class="money">{{dataModel.agent_total_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">实际分销佣金(元)</p>
				<p class="money">{{dataModel.agent_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">退款金额(元)</p>
				<p class="money">{{dataModel.refund_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">商户优惠券抵扣金额(元)</p>
				<p class="money">{{dataModel.coupon_money||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">平台优惠券抵扣金额(元)</p>
				<p class="money">{{dataModel.coupon_money_sys||0.00}}</p>
			</div>
			<div class="content">
				<p class="title">订单积分抵扣金额(元)</p>
				<p class="money">{{dataModel.points_money||0.00}}</p>
			</div>
		</div>
	</div>


	<div class="mt30">
		<!--表格-->
		<div class="product-content">
			<div class="table-wrap">
				<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
					<el-table-column prop="order_no" label="订单号">
						<template #default="scope">
							<span>{{scope.row.orderMaster.order_no}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="pay_money" label="支付金额"></el-table-column>
					<el-table-column prop="order_money" label="订单金额(不含运费)"></el-table-column>
					<el-table-column prop="real_supplier_money" label="商户实际结算金额"></el-table-column>
					<el-table-column prop="real_sys_money" label="平台实际抽成金额"></el-table-column>
					<el-table-column prop="agent_money" label="分销佣金"></el-table-column>
					<el-table-column prop="refund_money" label="退款金额"></el-table-column>
					<el-table-column prop="coupon_money" label="商户优惠券抵扣金额">
						<template #default="scope">
							<span>{{scope.row.orderMaster.coupon_money}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="coupon_money_sys" label="平台优惠券抵扣">
						<template #default="scope">
							<span>{{scope.row.orderMaster.coupon_money_sys}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="points_money" label="积分抵扣金额">
						<template #default="scope">
							<span>{{scope.row.orderMaster.points_money}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="添加时间"></el-table-column>
				</el-table>
			</div>

			<!--分页-->
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
					:total="totalDataNumber">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		settledDetail
	} from '@/api/cash.js';
	import {
		formatDate
	} from '@/utils/DateTime.js'
	export default {
		components: {},
		data() {
			return {
				/*是否加载完成*/
				loading: true,
				/*列表数据*/
				tableData: [],
				dataModel: {

				},
				/*一页多少条*/
				pageSize: 20,
				/*一共多少条数据*/
				totalDataNumber: 0,
				/*当前是第几页*/
				curPage: 1,
				/*横向表单数据模型*/
				formInline: {
					supplierId: null
				},
				searchForm: {
					createTime: []
				},
				supplierList: [],
				/*是否打开添加弹窗*/
				open_add: false,
				/*是否打开编辑弹窗*/
				open_edit: false,
				/*当前编辑的对象*/
				userModel: {},
				logoImgs: [],
				businessImgs: [],
			};
		},
		created() {
			/*获取列表*/
			this.getParams();
		},
		methods: {
			next() {
				if (this.active++ > 4) this.active = 0;
			},
			/*获取参数*/
			getParams() {
				let self = this;
				// 取到路由带过来的参数
				const params = this.$route.query;
				params.page = self.curPage;
				params.list_rows = self.pageSize;
				self.searchForm.createTime[0] = params.start_day;
				self.searchForm.createTime[1] = params.end_day;
				settledDetail(params, true)
					.then(res => {
						self.loading = false;
						self.tableData = res.data.list.data;
						self.totalDataNumber = res.data.list.total;
						self.dataModel = res.data.tjData;
					})
					.catch(error => {
						self.loading = false;
					});
			},

			/*选择第几页*/
			handleCurrentChange(val) {
				let self = this;
				self.curPage = val;
				self.loading = true;
				self.getTableList();
			},

			/*每页多少条*/
			handleSizeChange(val) {
				this.curPage = 1;
				this.pageSize = val;
				this.getTableList();
			},

			/*搜索查询*/
			onSubmit() {
				this.curPage = 1;
				this.getTableList();
			},

		}
	};
</script>

<style lang="scss">
	.apply-container {
		padding: 50px 0;
	}

	.cash {
		background-color: #fff;
		font: 14px;
	}

	.tips-border {
		border: 1px solid #CACACA;
		padding: 15px;
		margin-bottom: 20px;
	}

	.tips_tit {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.tips_txt {
		line-height: 25px;
		color: #666;
		font-size: 14px;
	}

	.cash_t_common {
		margin-top: 15px;
		margin-bottom: 0;
		box-shadow: initial;

		.cash_t_title {
			font-size: 15px;
			font-weight: 600;
		}

		.cash_t_title1 {
			font-size: 12px;
			font-weight: 600;
		}

		.cash-header {
			padding: 10px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.cash_t_brief .cash-header {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.cash-header {
		position: relative;
		height: 42px;
		line-height: 42px;
		padding: 0 15px;
		border-bottom: 1px solid #f6f6f6;
		color: #333;
		border-radius: 2px 2px 0 0;
		font-size: 14px;
	}

	.cash_t_brief .cash_t_title {
		position: relative;
		padding-left: 10px;
	}

	.cash_t_brief .cash_t_title::before {
		content: '';
		display: inline-block;
		width: 3px;
		height: 14px;
		background-color: #3a8ee6;
		position: absolute;
		left: 0;
		top: 50%;
		border-radius: 5px;
		transform: translateY(-50%);
	}

	.cash_t_common .cash-body {
		padding: 20px;
	}

	.cash-body {
		display: flex;
		justify-content: flex-start;
		padding-bottom: 0 !important;
		padding-right: 50px !important;
		padding-left: 50px !important;
		flex-wrap: wrap;
		position: relative;
		padding: 10px 15px;
		line-height: 24px;

		.content {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			margin-bottom: 30px;
			justify-content: center;
		}

		.content {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			margin-bottom: 30px;
			justify-content: center;
		}

		.money {
			font-size: 20px;
			color: #666;
			font-weight: bold;
			margin-top: 10px;
			max-width: 250px;
		}

		.subhead {
			font-size: 12px;
			margin-left: 3px;
			cursor: pointer;
		}
	}

	.ns-text-color {
		color: #3a8ee6;
	}

	.date_section {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>